import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form';
import { FC } from 'react';

type CreateFormProps = {
  createModalVisible: boolean;
  handleCreateModalVisible: any;
  handleCreate: (values: ADMIN.Permission) => void;
};

const CreateForm: FC<CreateFormProps> = (props) => {
  const { handleCreate, createModalVisible, handleCreateModalVisible } = props;

  return (
    <ModalForm<ADMIN.Permission>
      title="新建权限"
      width="500px"
      visible={createModalVisible}
      onVisibleChange={handleCreateModalVisible}
      onFinish={async (value) => {
        handleCreate(value);
      }}
    >
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormText
        name="action"
        label="权限方法"
        rules={[{ required: true, message: '请输入权限方法' }]}
        placeholder="请输入权限方法,例:TestController@lists"
      />
      <ProFormSelect
        name="menu_id"
        label="权限菜单"
        rules={[{ required: true, message: '请选择权限菜单' }]}
        fieldProps={{
          labelInValue: true,
        }}
        request={async () => [
          { label: '全部', value: '1' },
          { label: '未解决', value: '2' },
          { label: '已解决', value: '3' },
          { label: '解决中', value: '4' },
        ]}
        placeholder="请选择权限菜单"
      />
    </ModalForm>
  );
};

export default CreateForm;
